<!--
 * @Author: your name
 * @Date: 2021-12-06 17:57:20
 * @LastEditTime: 2021-12-19 14:54:19
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \homeStayMS\src\main\resources\static\vue\MainPage\fuck.vue
-->

<template>
  <section>
    <el-container class="home-container">
      <!--侧边栏-->
      <el-aside class="aside" width="200px">
        <!-- 导入侧边栏 -->
        <aside-bar :select-item.sync="selectSystem"></aside-bar>
      </el-aside>

      <!-- 中间栏 -->
      <el-container>
        <!-- 顶部栏 -->
        <el-header class="header-panel">
          <div class="left-div">
            <i class="el-icon-s-fold"></i>
          </div>
          <div class="right-div">
            <i class="el-icon-user"><span>admin</span></i>
            <el-button plain size="small" round @click="exit()">退出登录</el-button>
          </div>
        </el-header>

        <!-- 内容区 -->
        <el-main>
          <!-- 动态变化的主页面内容 -->
          <template v-for="item in componentList">
            <component
              :key="item"
              :is="item"
              v-if="isComponentShow(item)"
            ></component>
          </template>

          <!-- 搜索组件 -->
          <search-bar
            :search-select="searchSelect"
            :search-form-list="searchFormList"
          ></search-bar>

          <!-- <el-button type="primary" @click="testGoto()"> try to go </el-button> -->
        </el-main>
      </el-container>
    </el-container>
  </section>
</template>

<script>
import AsideBar from '../common-components/AsideBar/AsideBar.vue';
import SearchBar from '../common-components/SearchBar/SearchBar.vue';

// 文件命名总是被报错，无可奈何 暂时命名为此，保证不报错。
import storeManage from './storeManage/fuck.vue';

import CustomerInfo from './customerInfo/CustomerInfo.vue';
import EmployeeManage from './employeeManage/EmployeeManage.vue';
import IncomeCount from './incomeCount/IncomeCount.vue';
import OrderManage from './orderManage/OrderManage.vue';
import RoomManage from './roomManage/RoomManage.vue';

export default {
  name: 'MainPage',

  components: {
    AsideBar,
    SearchBar,

    // 页面的列表页内容
    CustomerInfo,
    IncomeCount,
    EmployeeManage,
    OrderManage,
    RoomManage,
    storeManage,
  },

  data() {
    return {
      selectSystem: 'storeManage',

      /** 组件名称对应键值对 */
      componentNameMap: new Map([
        ['CustomerInfo', 'customer-info'],
        ['IncomeCount', 'income-count'],
        ['EmployeeManage', 'employee-manage'],
        ['OrderManage', 'order-manage'],
        ['RoomManage', 'room-manage'],
        ['storeManage', 'store-manage'],
      ]),

      // 组件列表
      componentList: [
        'customer-info',
        'income-count',
        'employee-manage',
        'order-manage',
        'room-manage',
        'store-manage',
      ],
    };
  },

  methods: {
    // 组件是否显示？
    isComponentShow(item) {
      // console.log(
      //   ' 当前选择项：  ',
      //   this.selectSystem,
      //   this.componentNameMap.get(this.selectSystem),
      //   item
      // );
      return this.componentNameMap.get(this.selectSystem) === item;
    },
    exit(){
      window.location = '/login';
    },
  },
};
</script>

<style scoped>
.home-container {
  /*height: 100%;*/
  /*临时设置一个高度*/
  height: 937px;
}

.header-panel {
  display: flex;
  /*左右对齐*/
  justify-content: space-between;
  background-color: rgb(0, 40, 89);
  align-items: center;
  color: white;
  font-size: 22px;
  padding-left: 0px;
  padding-right: 0px;
}



.el-aside {
  background-color: rgb(0, 40, 89);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.el-main {
  background-color: rgb(246, 246, 246);
}
</style>
